<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播效果</title>
    <!-- 1. 下载轮播插件并引入 -->
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
    <!-- 3. 设置轮播容器宽高 -->
    <style>
        .swiper {
            width: 600px;
            height: 300px;
        }

        .swiper img {
            width: 600px;
            height: 300px;
        }
    </style>
</head>

<body>
    <!-- 2. 添加轮播html代码 -->
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="../img/11.jpg" alt="11">
            </div>
            <div class="swiper-slide">
                <img src="../img/22.jpg" alt="11">
            </div>
            <div class="swiper-slide">
                <img src="../img/33.jpg" alt="11">
            </div>
        </div>

        <!--分页器。如果放置在swiper外面，需要自定义样式。-->
        <div class="swiper-pagination"></div>
    </div>

    <!-- js代码 -->
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
    <!-- 4. 初始化轮播插件swiper -->
    <script>
        new Swiper('.swiper', {
            loop: true,  //无限循环
            autoplay: true, //自动轮播
            effect: 'cards', //切换效果
            pagination: {
                el: '.swiper-pagination',
            },
        })
    </script>
</body>

</html>